@import "../../styles/theme.scss";

page {
  width: 100%;
  height: 100%;
}

.video-contain {
  width: 100%;

  .video {
    width: 100%;
    height: 100%;
  }
}

swiper {
  height: 100%;
  width: 100%;
}

swiper video {
  width: 100%;
  height: 100%;
}

.touch-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // background-image: url('https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568967223_obtnfpoWy3.png');
  // background-size:100% 100%;
}

.nav-myself {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.title-content {
  display: flex;
  flex: 1;
  align-items: center;
}

.goods-title {
  display: inline-block;
  font-size: 28 rpx;
  line-height: 40 rpx;
  color: #333;
  font-weight: bold;
  @include text-ellipsis();
  margin-bottom: 24px;
}

.goods-desc {
  display: block;
  font-size: 22px;
  line-height: 30px;
  height: 60px;
  overflow: hidden;
  color: #63666c;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  // @include lamp-clamp(2);
}

.back {
  position: absolute;
  left: 30 rpx;
  width: 19 rpx;
  height: 32 rpx;
}

.back image {
  width: 100%;
  height: 100%;
}

.tools {
  position: fixed;
  right: 5 rpx;
  top: 500 rpx;
  display: flex;
  flex-direction: column;
  width: 125 rpx;
  z-index: 9999;
}

.share-icon {
  width: 73 rpx;
  height: 70 rpx;
  /* background-image: url(https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963641_Fkf2m79fFb.png);
  background-size: 100% 100%; */
}

.right-icon {
  margin: 20 rpx 20 rpx 28 rpx 0;
}

.home-icon {
  width: 75 rpx;
  height: 75 rpx;
  /* background-image: url(https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png);
  background-size: 100% 100%; */
}

.like-icon {
  width: 74 rpx;
  height: 64 rpx;
}

.text {
  color: white;
  width: 100 rpx;
  text-align: center;
  margin: 0 rpx 20 rpx;
}

.share-button {
  background-color: transparent !important;
  margin: 20 rpx 20 rpx 28 rpx 0;
  padding: 0 !important;
}

.video-goods {
  box-shadow: 0 0 14 rpx 0 rgba(0, 0, 0, .1);
  border-radius: 16 rpx;
  width: 578 rpx;
  height: 186 rpx;
  border-radius: 8 rpx;
  background: #fff;
  position: fixed;
  bottom: 50 rpx;
  left: 20 rpx;
  padding: 0 15 rpx;
  display: flex;
  align-items: center;
  z-index: 9999;
  min-width: 0;
}

// .video-goods cover-image{
//   height: 156rpx;
//   width: 156rpx;
//   border-radius: 8rpx;
//   margin-right: 20rpx;
// }
.goods-image {
  height: 156 rpx;
  width: 156 rpx;
  border-radius: 8 rpx;
  margin-right: 20 rpx;
}

.goods-right {
  font-size: 28 rpx;
  color: #1a1a1a;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  flex: 1;
  height: 156 rpx;
  min-width: 0;
  overflow: hidden;
}

.goods-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  flex: 1;
}

.goBuy {
  height: 52 rpx;
  padding: 0 30 rpx;
  border-radius: 26 rpx;
  color: #000;
  font-size: 24 rpx;
  line-height: 52 rpx;
  display: inline-block;
}

.buy-info {
  position: fixed;
  bottom: 280 rpx;
  left: 20 rpx;
  min-width: 320 rpx;
  z-index: 9999;
}

.buy-info .item-li {
  height: 68 rpx;
  padding: 0 10 rpx;
  border-radius: 34 rpx;
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 24 rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20 rpx;
}

.buy-info .item-li image {
  width: 60 rpx;
  height: 60 rpx;
  border-radius: 50%;
  margin-right: 20 rpx;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 128 rpx;
  width: 128 rpx;
  /* background-image: url(https://img.kemanyun.com/qianhuituan/2019-10-11/69_1570790815_yUO3cyjQTB.png);
  background-size: 100% 100%; */
  z-index: 200;
}

.market-price {
  color: #ccc;
  margin-top: 5 rpx;
  flex: 1;
  width: 100%;
}

.market-box {
  position: relative;
  display: inline-block;
  font-size: 28 rpx;
}

.line {
  width: 100%;
  position: absolute;
  height: 1px;
  background-color: #ccc;
  top: 16 rpx;
}

.hidden-box {
  width: 2 rpx;
  background: #fff;
  color: #fff;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
}
